<template>
  <div class="app-container calendar-list-container">
    <div class="sensitive_lexicon" v-loading="loading">
      <el-input class="sensitive__tag" v-if="inputVisible" v-model="word" ref="saveTagInput" size="small" @keyup.enter.native="handleAddSensitiveWord" @blur="handleAddSensitiveWord"></el-input>
      <el-button v-else class="sensitive__button" size="small" @click="handleShowInput">添加敏感词</el-button>
      <el-tag :key="index" v-for="(item, index) in sensitiveWordList" closable :disable-transitions="true" @close="handleDelSensitiveWord(item, index)">
        {{item.word}}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { addSensitiveWord, delSensitiveWord, getSensitiveWordList } from '@/api/sensitiveLexicon'

export default {
  name: 'SensitiveLexicon',
  data() {
    return {
      sensitiveWordList: [],
      loading: true,
      inputVisible: false,
      word: ''
    }
  },
  created() {
    this.handleGetSensitiveWordList()
  },
  methods: {
    // 获取列表
    handleGetSensitiveWordList() {
      this.loading = true
      getSensitiveWordList()
        .then(({ data }) => {
          this.sensitiveWordList = data
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 删除敏感词
    handleDelSensitiveWord({ id }, index) {
      this.loading = true
      delSensitiveWord({ id })
        .then(({ code }) => {
          if (code == 0) {
            this.sensitiveWordList.splice(index, 1)
            this.$message({
              message: '删除敏感词成功！',
              type: 'success'
            })
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    // 增加敏感词
    handleAddSensitiveWord() {
      const word = this.word
      if (!word) return
      this.loading = true
      addSensitiveWord({ word })
        .then(({ code, data }) => {
          if (code == 0) {
            this.sensitiveWordList.push(data)
            this.$message({
              message: '添加敏感词成功！',
              type: 'success'
            })
          }
          this.initParams()
        })
        .catch(() => {
          this.initParams()
        })
    },

    initParams() {
      this.loading = false
      this.inputVisible = false
      this.word = ''
    },

    handleShowInput() {
      this.inputVisible = true
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sensitive_lexicon {
  border: 1px solid #304156;
  margin: 0;
  padding: 20px;
  min-height: 600px;
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
  .sensitive__button {
    margin-right: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .sensitive__tag {
    width: 90px;
    margin-right: 10px;
    vertical-align: top;
  }
}
</style>


